<template>
  <div class="white-box" v-loading.fullscreen="loading">
    <title-more title="订单详情"></title-more>
    <div style="background: #F5F7FA;border: 1px solid #E8E8E8;padding: 15px 20px">
      <span>订单编号：</span>
      <span style="font-size: 16px;color: #ff5400;font-weight:bold">{{detail.orderCode}}</span>
    </div>
    <el-steps style="max-width: 1000px;margin: 20px auto" :active="stepsActive" align-center>
      <el-step :title="item.title" :description="item.description"  v-for="(item, index) in steps"/>
<!--      <el-step title="买家付款"/>-->
<!--      <el-step title="卖家发货"/>-->
<!--      <el-step title="确认收货"/>-->
    </el-steps>
    <div class="order-detail">
      <el-card shadow="never" class="mb20">
        <template #header>
          <div class="card-header">
            <span>订单信息</span>
          </div>
        </template>
        <ul class="info-table mgl15">
          <li class="long">
            <span class="bold">订单状态：</span>
            <el-text v-if="detail.orderStatus === 1" type="warning">待发货</el-text>
            <el-text v-else-if="detail.orderStatus === 4" type="success">已完成</el-text>
            <el-text v-else-if="detail.orderStatus === 10" type="primary">挂单</el-text>
            <el-text v-else-if="detail.orderStatus === 0" type="danger">待支付</el-text>
            <el-text v-else-if="detail.orderStatus === 2" type="info">待收货</el-text>
            <el-text v-else-if="detail.orderStatus === 3" type="info">待评价</el-text>
            <el-text v-else-if="detail.orderStatus === 5" type="info">已取消</el-text>
            <el-text v-else type="info">-</el-text>

            <span style="margin-left: 20px" v-if="detail.payTime"> 支付时间：{{detail.payTime}}</span>
            <span style="margin-left: 20px" v-if="detail.deliveryTime"> 发货时间：{{detail.deliveryTime}}</span>
            <span style="margin-left: 20px" v-if="detail.receiptTime"> 收货时间：{{detail.receiptTime}}</span>
          </li>
          <li class="long">
            <span class="bold">付款方式：</span>
            <span>积分支付	&nbsp;&nbsp;</span>
            <span style="color: #f3262a">(￥{{detail.price}})</span>
          </li>
          <li class="long">
            <span class="bold">配送方式：</span>
            <el-text v-if="detail.pickup === 1" type="success">快递</el-text>
            <el-text v-if="detail.pickup === 2" type="success">自提</el-text>
          </li>
          <template v-if="detail.pickup === 1">
            <li class="long">
              <span class="bold">收货信息：</span>
              <span>
              {{detail.province}} {{detail.city}} {{detail.district}} {{detail.address}}
            </span>
            </li>
            <li class="long">
              <span class="bold">收货人姓名/手机号：</span>
              <span>{{detail.name}} {{detail.phone}}</span>
            </li>
          </template>
          <template v-if="detail.pickup === 2 && detail.pickupAddress">
            <li class="long">
              <span class="bold">自提点信息：</span>
              <span>
                【{{detail.pickupAddress.storesName}}】
              </span>
              <span  style="margin-left: 20px">
                联系方式：{{detail.pickupAddress.name}}-{{detail.pickupAddress.phone}}
              </span>
              <span  style="margin-left: 20px">
                地址：{{detail.pickupAddress.province}} {{detail.pickupAddress.city}} {{detail.pickupAddress.district}} {{detail.pickupAddress.address}}
              </span>
            </li>
          </template>
          <template v-if="detail.pickup === 2">
            <li class="long">
              <span class="bold">提货人/手机号：</span>
              <span>{{detail.pickupName}} {{detail.pickupPhone}}</span>
            </li>
          </template>
        </ul>
      </el-card>

      <el-card shadow="never" class="mb20">
        <template #header>
          <div class="card-header">
            <span>佣金信息</span>
          </div>
        </template>
        <ul class="info-table mgl15">
          <li class="long" v-if="detail.commission">
            <span class="bold">预佣金：</span>
            <span style="color: #f3262a;font-weight: bold;font-size: 16px">¥{{detail.commission||0}}</span>
            <span v-if="detail.commissionType == 1">（分佣固定金额：￥{{commissionConfigs['fen-yuan-price']}}）</span>
            <span v-if="detail.commissionType == 2"> 订单金额金额(￥{{detail.price}})* 佣金比例({{commissionConfigs['fen-yuan-li']}}%） </span>
          </li>
          <li class="long" v-if="detail.user">
            <span class="bold">下单用户昵称/手机号：</span>
            <el-button @click="toClientDetail(detail.user.sid)" link type="primary">{{detail.user.nickName}}</el-button>
            <span style="margin-left: 20px">{{detail.user.phone}}  </span>
          </li>
          <li class="long" v-if="detail.superUser">
            <span class="bold">上级用户昵称/手机号：</span>
            <el-button @click="toClientDetail(detail.superUser.sid)" link type="primary">{{detail.superUser.nickName}}</el-button>
            <span style="margin-left: 20px">{{detail.superUser.phone}} </span>

          </li>
<!--          <li class="long">-->
<!--            <span class="bold">订货：</span>-->
<!--            <span>张杰  </span>-->
<!--            <span style="color: #f3262a;font-weight: bold;font-size: 16px">¥36.50</span>-->
<!--            <span> (实付金额(365.00) - 运费(0.00) - 成本(0)) * 佣金比例(0.1)</span>-->
<!--          </li>-->
        </ul>
      </el-card>
      <el-card v-if="false" shadow="never" class="mb20">
        <template #header>
          <div class="card-header">
            <span>活动信息</span>
          </div>
        </template>
        <ul class="info-table mgl15">
          <li class="long">
            <span class="">买家消费获赠积分：</span>
            <span style="color: #f3262a;font-weight: bold;font-size: 16px">365</span>
          </li>
          <li class="long">
            <span>买家消费获赠虚拟币：</span>
            <span style="color: #f3262a;font-weight: bold;font-size: 16px">365</span>
          </li>
        </ul>
      </el-card>
      <el-card  v-if="detail.courierCompany || detail.courierNumber" shadow="never" class="mb20">
        <template #header>
          <div class="card-header">
            <span>物流信息</span>
          </div>
        </template>
        <ul class="info-table mgl15">
          <li class="long">
            <span class="bold">快递公司：</span>
            {{detail.courierCompany}}
          </li>
          <li class="long">
            <span class="bold">快递编号：</span>
            {{detail.courierNumber}}
          </li>
        </ul>
      </el-card>


      <el-table class="mb20" :data="productList" :header-cell-style="{ background: '#F5F7FA' }" element-loading-background="rgba(255, 255, 255, 0.6)">
        <el-table-column prop="productImg" label="主图" min-width="80" width="80">
          <template #default="{ row }">
            <el-image style="width: 65px; height: 65px; border: 1px solid rgb(204, 204, 204); padding: 3px; border-radius: 5%;" :src="getImg(row.productImg)" fit="cover" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品" min-width="260">
          <template #default="{ row }">
            <p >{{row.productName}}</p>
            <p >规格：{{row.productSpecifications}}</p>
          </template>
        </el-table-column>
<!--        <el-table-column prop="visible" label="编号"  width="100">-->
<!--          <template #default="{ row }">-->
<!--            <span>450100</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column prop="price" label="单价（元）"  width="100">
          <template #default="{ row }">
            <span>¥{{row.productPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="freight" label="运费"  width="100">
          <template #default="{ row }">
            <span>{{row.productFreight}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="count" label="数量"  width="100">
          <template #default="{ row }">
            <span>{{row.count}}</span>
          </template>
        </el-table-column>

        <el-table-column label="小计" min-width="200" width="200" fixed="right" align="left">
          <template #default="{ row }">
<!--            <span>￥{{row.productPrice*row.count+row.productFreight}}</span>-->
          </template>
        </el-table-column>
      </el-table>
      <ul class="info-table" style="text-align:right;margin-bottom: 30px">
<!--        <li class="long">-->
<!--          <span class="">商品小计：</span>-->
<!--          <span style="color: #f3262a;font-weight: bold;font-size: 16px">¥365.00</span>-->
<!--        </li>-->
        <li class="long">
          <span>运费：</span>
          <span style="color: #f3262a;font-weight: bold;font-size: 16px">¥{{detail.freight}} </span>
        </li>
        <li class="long">
          <span>订单总金额：</span>
          <span style="color: #f3262a;font-weight: bold;font-size: 16px">¥{{detail.price}} </span>
        </li>
      </ul>
    </div>
    <div class="foot-btn flexs-center" style="margin-top: 30px">
      <!--0=待支付，1=待发货，2=待收货，3=待评价，4=已完成 5=已取消 10=挂单-->
      <el-button type="primary" size="large" :loading="btnLoading" @click="handleUpdateStatus(detail,1)" v-if="detail.orderStatus === 1">标记发货</el-button>
      <el-button type="primary" size="large" :loading="btnLoading" @click="handleUpdateStatus(detail,2)" v-if="detail.orderStatus === 2">买家已收货</el-button>
      <el-button type="warning" size="large" :loading="btnLoading" @click="handleUpdateStatus(detail,4)" v-if="detail.orderStatus === 0">标记已支付</el-button>
      <el-button type="danger" size="large" :loading="btnLoading" @click="handleUpdateStatus(detail,3)" v-if="detail.orderStatus === 0">取消订单</el-button>
    </div>
    <go-back />
  </div>
  <updateStatus :show="updateStatusShow" :data="updateStatusData" @close="closeUpdateStatus"></updateStatus>
</template>

<script setup>
import {
  getCurrentInstance,
  ref,
  reactive,
  onMounted,
  watch,
  computed
} from "vue"
import listMixins from "@mixins/hook/list"
import {
  useRoute,
  useRouter
} from "vue-router"
import GoBack from "@components/GoBack.vue"
import TitleMore from "@components/title-more.vue";
import updateStatus from "./components/updateStatus.vue";

const {
  proxy
} = getCurrentInstance()

const loading = ref(false)
const router = useRouter()
const route = useRoute()
const sid = route.query.sid || ""
onMounted(() => {
  if(sid){
    getDetail()
    getCommissionConfigs();
  }
})
const getImg = (imagePath) =>{
  try {
    return proxy.imgUrl + imagePath
  }catch(err){
    return ''
  }
}
const formRule = reactive([])
const formData = reactive({})
const productList = ref([]);
const detail = reactive({})
const steps = computed(()=>{
  if(detail.orderStatus == 10){
    return [
      {title:'创建订单',description:detail.created},
      {title:'挂单',description:''},
    ]
  }
  if(detail.orderStatus == 5){
    return [
      {title:'创建订单',description:detail.created},
      {title:'已取消',description:''},
    ]
  }
  return [
    {title:'创建订单',description:detail.created},
    {title:'买家付款',description:''},
    {title:'卖家发货',description:''},
    {title:'确认收货',description:''},
    {title:'已评价/已完成',description:''},
  ]
})
const stepsActive = computed(()=>{
  if(detail.orderStatus == 10 || detail.orderStatus == 5){
    return 1
  }
  if(detail.orderStatus == 1){
    return 1
  }
  if(detail.orderStatus == 2){
    return 2
  }
  if(detail.orderStatus == 3){
    return 3
  }
  if(detail.orderStatus == 4){
    return 4
  }
  return 0
  // 订单状态：0=待支付，1=待发货，2=待收货，3=待评价，4=已完成 5=已取消 10=挂单
})
const getDetail = async () =>{
  loading.value = true
  await proxy.$axios
      .get(`/order/${sid}`)
      .then((res) => {
        if (res.data.code == 200) {
          let result = res.data.data
          for (let key in result) {
            detail[key] = result[key]
          }
          productList.value = result.productList;
        } else {
          proxy.$message({message: res.data.msg, type: "error"})
        }
      }).catch((err) => {

      }).finally(()=>{
        loading.value = false
      })
}
// status 	1=确认发货，2=确认收货，3=取消订单 4=支付订单
const btnLoading = ref(false)
const updateStatusShow = ref(false);
const updateStatusData = reactive({
  row:{},
  status:0
});
const closeUpdateStatus =(isSubmit)=>{
  updateStatusShow.value = false
  if(isSubmit){
    getDetail();
  }
}
const handleUpdateStatus = (row,status) =>{
  updateStatusData.row = row;
  updateStatusData.status = status;
  updateStatusShow.value = true
}
let commissionConfigs = reactive({
  'fen-yuan-price':0,
  'fen-yuan-li':0
})
const getCommissionConfigs = async () =>{
  loading.value = true
  await proxy.$axios
      .get(`/configs/commission/1`)
      .then((res) => {
        if (res.data.code == 200) {
          let result = res.data.data
          if(result){
            result.forEach(v=>{
              commissionConfigs[v.configKey] = v.configValue
            })
          }
        } else {
          proxy.$message({message: res.data.msg, type: "error"})
        }
      }).catch((err) => {

      }).finally(()=>{
        loading.value = false
      })
}
const toClientDetail = (sid) => {
  router.push({
    path: "/Client/ClientDetail",
    query: {
      sid:sid
    }
  })
}
</script>

<style lang="less">
.order-detail{
  .el-card__header{
    background: #F5F7FA;
  }

  .info-table li {
    width: 30%;
    margin-right: 1%;
    line-height: 34px
  }

  .info-table li.long {
    width: auto;
    display: flex;
  }
  .bold {
    font-weight: 700;
  }
  .mb20{
    margin-bottom: 20px;
  }

}

</style>